<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <!-- <link rel="icon" href=""> -->
  <title>客户欢迎语</title>

  <!-- <link rel="dns-prefetch" href="//cdn.jsdelivr.net"> -->
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="yes" name="apple-mobile-web-app-capable">

  <link rel="stylesheet" href="/homemobile/kehu/css/weui.min.css">
  <link rel="stylesheet" href="/homemobile/kehu/css/base.css">

  <style>
    .section {
      padding: .3rem .24rem;
      background-color: #fff;
      border-bottom: .2rem solid #f6f6f6;
    }

    .section:last-child {
      border-bottom: 0;
    }

    .section-textarea {
      font-size: .28rem;
      padding: 7px;
      background: #f6f6f6;
      border: 1px solid #f1f1f1;
      border-radius: 3px;
    }

    .section-textarea::before {
      display: none;
    }
  </style>

</head>

<body>

  <form action="" method="POST" enctype="multipart/form-data">

    <section class="section" style="border: 0;">
      <p class="vertical-line-title">欢迎语设置</p>
      <p style="font-size: .28rem;color: #555;margin-bottom: 7px;">消息1：</p>
      <div class="weui-cell section-textarea">
        <div class="weui-cell__bd">
          <textarea maxlength="600" name="text_content" class="weui-textarea msg1" placeholder=""
            rows="4"></textarea>
          <div class="weui-textarea-counter"><span class="msg1-length">0</span>/600</div>
        </div>
      </div>
      <div class="rich-msg">
        <div class="d-flex align-items-center" style="margin-bottom: 8px;">
          <span>消息2：</span>
          <!-- <input type="radio" lay-filter="shareType" name="shareType" value="1" title="无" {if $welcomeMsg->other_type == 1}checked{/if}>
								<input type="radio" lay-filter="shareType" name="shareType" value="2" title="图片" {if $welcomeMsg->other_type == 2}checked{/if}>
								<input type="radio" lay-filter="shareType" name="shareType" value="3" title="图文" {if $welcomeMsg->other_type == 3}checked{/if}>
								<input type="radio" lay-filter="shareType" name="shareType" value="4" title="小程序" {if $welcomeMsg->other_type == 4}checked{/if}> -->
          <label class="flex-1">
            <input type="radio" {if $welcomeMsg->other_type == 2}checked{/if} value="2" name="richMsgType" data-type="pic"><span>图片</span></label>
          <label class="flex-1">
            <input type="radio" value="3" {if $welcomeMsg->other_type == 3}checked{/if} name="richMsgType" data-type="link"><span>链接</span></label>
          <label class="flex-1">
            <input type="radio" value="4" {if $welcomeMsg->other_type == 4}checked{/if} name="richMsgType" data-type="mp"><span>小程序</span></label>
          <label class="flex-1">
            <!-- <input type="radio" value="" name="richMsgType" data-type="form"><span>表单</span></label> -->
        </div>
        <!-- uploader: https://weui.io/#uploader , https://github.com/Tencent/weui.js/blob/master/docs/component/uploader.md -->
        <!-- 微信jssdk -->
        <div class="box-add rich-msg-type rich-msg-pic" {if $welcomeMsg->other_type != 2} style="display: none;" {/if}>
          <img onerror="this.style.display='none'" id="pic_image" src="" style="width: 100px; height: 100px;">
          <input type="hidden" name="image" id="image" />
          <button type="button" class="layui-btn select_img" data-target="image">
            上传图片
          </button>
        </div>
        <div class="box-add rich-msg-type rich-msg-link" {if $welcomeMsg->other_type != 3} style="display: none;" {/if}>
        <input class="rich-msg-type rich-msg-link" type="text" value="{$welcomeMsg->link_url}" name="link_url" placeholder="请输入图文链接，链接地址以http或https开头">
        <input class="rich-msg-type rich-msg-link" type="text" value="{$welcomeMsg->link_title}" name="link_title" placeholder="标题">
        <input class="rich-msg-type rich-msg-link" type="text" value="{$welcomeMsg->link_title}" name="link_desc" placeholder="描述">
        <div class="rich-msg-type rich-msg-link">
          <img onerror="this.style.display='none'" id="pic_link_pic" src="{$welcomeMsg->link_pic}" style="width: 100px; height: 100px;">
          <input type="hidden" name="link_pic" id="link_pic" />
          <button type="button" class="layui-btn select_img" data-target="link_pic">
            上传图片
          </button>
        </div>
        </div>
        <div class="box-add rich-msg-type rich-msg-pic" {if $welcomeMsg->other_type != 4} style="display: none;" {/if} >
        <div class="box-add rich-msg-type rich-msg-mp">添加小程序</div>
        <div class="box-add rich-msg-type rich-msg-form">选择素材</div>
      </div>
    </section>

    <div class="d-flex align-items-center">
      <a href="javascript:" class="flex-1 weui-btn weui-btn_default" style="margin: .24rem;color: #666;">取消</a>
      <!-- <a href="javascript:" class="flex-1 weui-btn weui-btn_primary" style="margin: .24rem;">创建群发</a> -->
      <input type="submit" value="创建" class="flex-1 weui-btn weui-btn_primary" style="margin: .24rem;">
    </div>
    
    <!-- </form> -->
      
      <!-- 加小程序模板 -->
      <div id="mpDialog" class="dialog-main" {if $welcomeMsg->other_type != 4} style="display: none;" {/if}>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序标题：</span>
          </div>
          <input type="text" class="form-input" name="miniprogram_title" placeholder="请输入小程序标题" style="width: 100%;">
        </div>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序appid：</span>
            <a href="https://baidu.com" target="_blank">如何获取小程序appid？</a>
          </div>
          <input type="text" class="form-input" name="miniprogram_appid" placeholder="请输入小程序appid" style="width: 100%;">
        </div>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序路径：</span>
            <a href="https://baidu.com" target="_blank">如何获取小程序路径？</a>
          </div>
          <input type="text" class="form-input" name="miniprogram_page" placeholder="请输入小程序路径" style="width: 100%;">
        </div>
        <div style="margin-bottom: 13px;">
          <div class="d-flex align-items-center justify-sb" style="margin:5px auto">
            <span><span style="color: red;">*</span>小程序封面：</span>
          </div>
          <div class="box-add">
            <img onerror="this.style.display='none'" id="pic_miniprogram_pic" src=""
              style="width: 100px; height: 100px;">
            <input type="hidden" name="miniprogram_pic" id="miniprogram_pic" value="" />
            <button type="button" class="layui-btn " onclick="upload(this)" data-target="miniprogram_pic">
              上传图片
            </button>
          </div>


          <p style="margin: 10px 0;"><small>建议尺寸：352*282px</small>
          </p>
        </div>
        <div style="text-align: right;margin-top: 20px;">
          <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default"
            style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
          <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary mp-confirm"
            style="font-size:13px;">确定</a>
        </div>
      </div>
      <!-- 表单-选择素材 -->
      <div style="display: none;" id="formDialog" class="dialog-main">
        <p class="dialog-title">自定义表单</p>
        <img onclick="closeDialog(this)" class="dialog-close" src="./img/close.png" alt="">

        <p style="text-align: center;">还没有添加表单呦～</p>
        <div style="text-align: right;margin-top: 20px;">
          <a onclick="closeDialog(this)" href="javascript:" class="weui-btn weui-btn_mini weui-btn_default"
            style="font-size:13px;margin-right:.24rem;color:#666;">取消</a>
          <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary form-confirm"
            style="font-size:13px;">确定</a>
        </div>
      </div>
   
  </form>


      <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> -->
      <script src="/homemobile/kehu/js/jquery.min.js"></script>
      <script src="/homemobile/kehu/js/weui.min.js"></script>
      <script src="/homemobile/kehu/js/common.js"></script>
      <script src="/layui/layui.js"></script>
      <script src="/js/ajax.js"></script>
      <script>
        function cs() {
          var tags = [];
          var khs = [];
          $(".active").each(function () {
            tags.push($(this).attr('data-val'))
          });
          $("#tags").val(JSON.stringify(tags));
          console.log(khs);
          console.log(tags);
          var datas = !{ "tag": tags, "kh": khs };

        }

        // 消息1字数
        $(document).on('input', '.msg1', function (e) {
          $('.msg1-length').text($(this).val().length)
        })
        // 消息2切换
        $(document).on('change', '[name=richMsgType]', function (e) {
          var _this = $(this)
          console.log(_this.val())
          var pNode = _this.parentsUntil('rich-msg')
          pNode.find('.rich-msg-type').hide()
          pNode.find('.rich-msg-' + _this.data().type).fadeIn()
        })
        // 添加小程序
        $(document).on('click', '.rich-msg-mp', function () {
          showDialog('#mpDialog')
        })
        $(document).on('click', '.mp-confirm', function (e) {
          // do something
          closeDialog()
        })
        // 添加表单 选择素材
        $(document).on('click', '.rich-msg-form', function () {
          showDialog('#formDialog')
        })
        $(document).on('click', '.form-confirm', function (e) {
          // do something
          closeDialog()
        })
      </script>
      <script>
        layui.use(['element', 'layer', 'upload'], function () {
          var layer = layui.layer;
        });
        $('.select_img').on('click', function () {
          var targetId = this.getAttribute('data-target');
          layer.open({
            title: '图片库',
            type: 2,
            area: ['300px', '350px'],
            fixed: false, //不固定
            maxmin: false,
            content: '/imgLib/lib.html?type=vshop_img&target=' + targetId
          });
        })

        function upload(t) {
          var targetId = t.getAttribute('data-target');
          layer.open({
            title: '图片库',
            type: 2,
            area: ['300px', '350px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/imgLib/lib.html?type=vshop_img&target=' + targetId
          });

        }
        window.uploadImgCallback = function (tgt, url) {
          // console.log('选择图片结果', tgt, url);
          if (tgt == 'image') {
            var inputEle = $('#image');
            var prevEle = $('#pic_image');
            inputEle.val(url);
            prevEle.attr('src', url);
            prevEle.show();
          } else if (tgt == 'link_pic') {
            var inputEle = $('#link_pic');
            var prevEle = $('#pic_link_pic');
            inputEle.val(url);
            prevEle.attr('src', url);
            prevEle.show();
          } else if (tgt == 'miniprogram_pic') {
            $('.m-dialog').find('#pic_miniprogram_pic').attr('src', url).show()
            $('.m-dialog').find('#miniprogram_pic').val(url)
            var inputEle = $('#miniprogram_pic');
            var prevEle = $('#pic_miniprogram_pic');
            // alert($('#miniprogram_pic').val())
            // $('#miniprogram_pic').val(url)
            // prevEle.attr('src', url);
            prevEle.show();
          };
        }
      </script>
</body>

</html>